<!-- START action buttons-->
<div class="clearfix mb">
    <div class="btn-group pull-left">
        <button class="btn btn-default btn-sm" type="button">
            <em class="fa fa-mail-reply text-gray-dark"></em>
        </button>
        <button class="btn btn-default btn-sm" type="button">
            <em class="fa fa-mail-reply-all text-gray-dark"></em>
        </button>
        <button class="btn btn-default btn-sm" type="button">
            <em class="fa fa-mail-forward text-gray-dark"></em>
        </button>
    </div>
    <div class="btn-group pull-right">
        <button class="btn btn-default btn-sm" type="button">
            <em class="fa fa-exclamation text-gray-dark"></em>
        </button>
        <button class="btn btn-default btn-sm" type="button">
            <em class="fa fa-times text-gray-dark"></em>
        </button>
    </div>
</div>
<!-- END action buttons-->
<div class="panel panel-default">
    <div class="panel-body">
        <p class="lead text-center" *ngIf="!folderMailsCount()">No mails here</p>
        <table class="table table-hover mb-mails" *ngIf="folderMailsCount()">
            <tbody>
                <tr *ngFor="let mail of folderMails()" [class.mb-mail-active]="mail.unread">
                    <td>
                        <div class="checkbox c-checkbox">
                            <label>
                                <input type="checkbox" />
                                <span class="fa fa-check"></span>
                            </label>
                        </div>
                    </td>
                    <td class="text-center">
                        <em class="fa fa-lg" [ngClass]="mail.folder=='starred'?'fa-star text-warning':'fa-star-o text-muted'"></em>
                    </td>
                    <td [routerLink]="['/extras/mailbox/view',mail.id]">
                        <img class="mb-mail-avatar pull-left" [src]="mail.from.avatar" alt="Mail Avatar" />
                        <div class="mb-mail-date pull-right">{{mail.date}}</div>
                        <div class="mb-mail-meta">
                            <div class="pull-left">
                                <div class="mb-mail-subject">{{mail.subject}}</div>
                                <div class="mb-mail-from">{{mail.from.name}}</div>
                            </div>
                            <div class="mb-mail-preview" [innerHTML]="mail.content"></div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
